<template>
  <div class="kLine blockColor">
    <div id="tv_chart_container" style="width: 100%;height:100%"></div>
  </div>
</template>
<script>
  require('../../assets/js/jQuery')
  require('../../../static/charting_library/charting_library.min')

  import {KLine} from "@/assets/js/chart_constant"
  import Datafeeds from "@/assets/js/datafeed";

  export default {
    name: 'KLine',
    components: {},
    data(){
      return {
        widget: null,
        symbolInfo: null,
        coin:[Object]
      }
    },

    created(){

    },
    methods: {
      updateData(data) {
        if (data) {
          //console.log("emit real-time");
          this.$emit('real-time', data);
        }
      },
      createWidget() {
        let _this = this;
        var widget = new TradingView.widget({
          autosize:true,
          symbol: 'AAPL',
          interval: '15',
          container_id: "tv_chart_container",
          datafeed: new Datafeeds.UDFCompatibleDatafeed(_this.symbolInfo, _this.updateData),
          library_path: "/static/charting_library/",
          custom_css_url: "css/chartKLine.css",
          locale: "zh",
          drawings_access:KLine.drawings_access,
          disabled_features:KLine.disabled_features,
          enabled_features:KLine.enabled_features,
          /*     charts_storage_url: location.host,*/
          charts_storage_api_version: "1.1",
          toolbar_bg: "transparent",
          timezone: "Asia/Hong_Kong",
          overrides:KLine.overrides,

        });
        widget.MAStudies = [];
        widget.selectedIntervalButton = null;
        widget.onChartReady(function () {
          let chart = widget.chart();

          KLine.mas.forEach(item => {
            chart.createStudy("Moving Average", false, false, [item.day], entity => {
              widget.MAStudies.push(entity);
            }, {"plot.color": item.color});
          });

          chart.onIntervalChanged().subscribe(null, function (interval, obj) {
            widget.changingInterval = false;
          });
          KLine.buttons.forEach((item, index) => {
            let button = widget.createButton();

            item.resolution === widget.options.interval && updateSelectedIntervalButton(button);
            button.attr("data-resolution", item.resolution)
              .attr("data-chart-type", item.chartType === undefined ? 1 : item.chartType)

              .html("<span "+(item.chartType==3?"class='active'":'')+">"+ item.label +"</span>")
              .on("click", function() {

                if (!widget.changingInterval && !button.hasClass("selected")) {
                  let chartType = +button.attr("data-chart-type");
                  let resolution = button.attr("data-resolution");

                  if (chart.resolution() !== resolution) {
                    widget.changingInterval = true;
                    chart.setResolution(resolution);
                  }
                  if (chart.chartType() !== chartType) {
                    chart.setChartType(chartType);
                    /*widget.applyOverrides({
                     "mainSeriesProperties.style": chartType
                     });*/
                  }
                  updateSelectedIntervalButton(button);
                  showMAStudies(chartType !== 3);
                }
              })
          });

          function updateSelectedIntervalButton(button) {
            widget.selectedIntervalButton && widget.selectedIntervalButton.removeClass("selected");
            button.addClass("selected");
            widget.selectedIntervalButton = button;

          }

          function showMAStudies(visible) {

            widget.MAStudies.forEach(item => {

              chart.setEntityVisibility(item, visible);
            })
          }
        });

      },
      updateWidget(item) {

        this.symbolInfo = {
          name: "11",
          ticker: "",
          description: "",
          session: "24x7",
          supported_resolutions: ['1', '5', '15', '30', '60', '1D', '1W', '1M'],
          has_intraday: true,
          has_daily: true,
          has_weekly_and_monthly: true,
          timezone: "Asia/Hong_Kong",
          minmov:1,
          pricescale:10000

        }

        this.removeWidget();
        this.createWidget();
      },
      removeWidget() {
        if (this.widget) {
          this.widget.remove();
          this.widget = null;
        }
      },
    },
    mounted() {
      this.updateWidget(this.coin)
      //this.coin && this.coin.virtualCoinId && this.updateWidget(this.coin);
    },
    destroyed() {
      this.removeWidget();
    }
  }
</script>
<style>
  .kLine{
    width: 100%;
    height: 100%;

  }
</style>
